<template>
  <div class="main">
    <router-view></router-view>
    <div class="menuBottom">
      <van-tabbar v-model="active" class="mainBottom" active-color="#ccc" inactive-color="#000">
        <van-tabbar-item replace to="/index">
          <span>首页</span>
          <template #icon="props">
            <img :src="props.active ? icon.Homeactive : icon.Homeinactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/album">
          <span>照片</span>
          <template #icon="props">
            <img :src="props.active ? icon.Albumactive : icon.Albuminactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/publish">
          <span>发布</span>
          <template #icon="props">
            <img
              :src="props.active ? icon.Uploadactive : icon.Uploadinactive"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/message" badge="3">
          <span>消息</span>
          <template #icon="props">
            <img
              :src="props.active ? icon.Messageactive : icon.Messageinactive"
            />
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/my">
          <span>我的</span>
          <template #icon="props">
            <img :src="props.active ? icon.Mineactive : icon.Mineinactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      icon: {
        Homeactive: require("../static/images/Home_full.png"),
        Homeinactive: require("../static/images/Home.png"),
        Albumactive: require("../static/images/Album_full.png"),
        Albuminactive: require("../static/images/Album.png"),
        Uploadactive: require("../static/images/Upload.png"),
        Uploadinactive: require("../static/images/Upload.png"),
        Messageactive: require("../static/images/Message_full.png"),
        Messageinactive: require("../static/images/Message.png"),
        Mineactive: require("../static/images/Mine_full.png"),
        Mineinactive: require("../static/images/Mine.png"),
      },
    };
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 750rpx;
  height: 100%;
  margin: 0 auto;
}
</style>